<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—首页</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../CSS/index.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <script src="../JS/jQuery.min.js"></script>

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
        <!-- mask登录需要作为背景强调登陆框 -->
        <div class="mask"></div>
            <div class="logo">宠物收容所</div>
            <ul class="nav-menu">
                <li  class="current"><a href="index.html">首页</a></li>
                <li><a href="AdoptionCenter.html">领养中心</a></li>
                <li><a href="PetKnowledge.html">宠物知识</a></li>
                <li><a href="TeamActivities.html">团队活动</a></li>
                <li><a href="BeVolunteer.html">成为志愿者</a></li>
                <li><a href="Donate.html">捐助</a></li>
            </ul>
            <div  class="nav-login" v-show="user_id">
            <div class="Avater">
                <ul>
                <li><img :src="logginMessage.user_avater_url" alt=""></li>
                <li><div>{{this.logginMessage.userlogin_name}}</div></li>
                <li><div><a href="userCenter.html">用户中心</a></div></li>
                <li @click="outLogin">退出登录</li>
                </ul>
            </div>
            </div>
    
    
    
    
            <div class="nav-login" v-show="!user_id" @click="Loginhandle">
                <ul>
                    <li><a href="javascript:;">
                        <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                    </a></li>
                    <li><a href="javascript:;">登录/注册</a></li>
                </ul>
            </div>
    
            <div class="login-box">
            <div class="Login">
                <div class="owl" id="owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
            <form action="">
                <div>
                    <span class="iconfont icon-yonghu"></span>
                    <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
                </div>
                <div>
                    <span class="iconfont icon-ttubiao_password"></span>
                    <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
                </div>
                
                <!-- <button @click="loginButton">提交</button> -->
                <span @click="loginButton" style="color: #fff;
                background-color: #20b2aa;
                height: 50px;
                width: 150px;
                text-align: center;
                font-size: 1.2rem;
                line-height: 50px;
                border-radius: 3px;
                ">提交我</span>
            </form>
            <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
    
            <div class="Register"  style="display: none;">
    
                <div class="owl" id="reowl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
                <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
                <el-row>
                <el-col>
                    <el-form 
                    status-icon 
                    :inline="true" 
                    label-width="0px" 
                    :model="registerMessage" 
                    ref="registerMessage" 
                    class="demo-ruleForm" 
                    :rules="rules" 
                    
                    >
                        <div>
                            <span class="iconfont icon-email"></span>
                            <el-form-item label="" prop="user_email">
                            <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dianhua"></span>
                            <el-form-item label="" prop="user_phone">
                            <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <span class="iconfont icon-yonghu"></span>
                            <el-form-item label="" prop="user_name">
                                <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dizhi"></span>
                            <el-form-item label="" prop="user_address">
                                <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                            </el-form-item>
                        
                        </div>
                        <div>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password">
                            <el-input placeholder="密码" 
                            autocomplete="off" 
                            id="registerpass1" 
                            v-model="registerMessage.user_password" 
                            type="password" 
                            show-password
       
                            ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password_again">
                            <el-input placeholder="再次输入密码" 
                            autocomplete="off" 
                            id="registerpass" 
                            v-model="registerMessage.user_password_again" 
                            type="password" 
                            show-password
                            
                            
                            ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-input
                            style="
                            height: 10vh;
                            "
                            type="textarea"
                            placeholder="介绍一下自己吧"
                            v-model="registerMessage.user_info"
                            maxlength="60"
                            show-word-limit
                            style="font-size: 1.5rem;
                                height: 15vh;
                            "
                            >
                            </el-input>
                        </div>
                        <div style="color: #000;">
                            <template>
                            是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                            <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                            </template>
                        </div>
            <div style="color: #000;
            border: 1px #ccc solid;
            ">
            
            <el-upload
                class="upload-demo"
                drag
                action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                name="imgFile"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                multiple 
                
                >
                <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
                <i v-else class="el-icon-upload"
                style="
                    font-size: 67px;
                    color: #C0C4CC;
                    margin: 16px 0 16px;
                    line-height: 50px;
                "
                >
                <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </i>
                
            </el-upload>
            </div>
            
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerMessage')"
                        style="width: 15vw;"
                    >提交</el-button>
                    <el-button @click="resetForm('registerMessage')"
                        style="width: 15vw;"
                    >重置</el-button>
                </el-form-item>
            </div>
    
                    </el-form>
                </el-col>
                </el-row>
                <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
            </div>
             <div class="burger">
                 <div class="top-line"></div>
                 <div class="middle-line"></div>
                 <div class="bottom-line"></div>
             </div>
    </nav>
    <!-- 网页内容 -->
  
    <div class="index-con">
        <div class="item" id="index-index">
            <div class="index-index-content">
                <div>
                    <div class="video-float">
                        <ul><li><h1>阳光依旧，时光依然，</h1></li></ul>
                        <ul><li><h1>狗狗相见时的欢喜雀跃与奔跑</h1></li></ul>
                        <ul><li><h1>我们可以轻易拥有并享受它吗？</h1></li></ul>
                    </div>
                    <video  src="http://photo.karrysmile.top/Dogrunning.mp4" muted autoplay loop></video>
                </div>

                <!-- 先扬起来 然后抑下去 再扬起来 -->
                <div class="text1">
                    <div class="left">
                        <ul >
                            <li style="display: none;"><h1>我们常说动物是我们的朋友</h1></li>
                            <li style="display: none;"><h1>它们<span style="color: pink;font-size: 3rem;">可爱</span> <span style="color: skyblue;font-size: 3rem;">通灵</span></h1></li>
                            <li style="display: none;"><h1>是<span style="color: #ccc;">枯燥</span>生活的<span style="color: rgb(72 159 127);
                                font-size: 3rem;">慰藉</span></h1></li>
                            <li style="display: none;"><h1>是世间<span style="color: #00ffa1; font-size: 3rem;">美好</span>的存在</h1></li>
                        </ul>
                        <!-- <span style="color: ;"></span> -->
                    </div>
                    <div class="right">
                        <img src="../Dealedimages/fish.png" alt="">
                    </div>
                </div>

                <div class="text2">
                    <div class="left">
                        <img src="../Dealedimages/R-C.png" alt="" style="width: 40vw;">
                    </div>
                    <div class="right">
                        <ul>
                            <li><h1>狗狗可能是你生命中的一部分</h1></li>
                            <li><h1>可你却是它们生命的<span style="color: red; font-size:3rem;">全部</span></h1></li>
                        </ul>
                    </div>
                </div>

                <div class="text3">
                    <div class="left">
                        <ul>
                            <li><h1>或风轻云淡，或刻骨铭心，</h1></li>
                            <li><h1>您与宠物之间的关系，也可能有着千丝万缕的不同</h1></li>
                            <li><h1>或玩伴，或至交，或生活的依靠，</h1></li>
                            <li><h1>亦或许，他可能只是你生命中的一个过客，</h1></li>
                            <li><h1>但是，你却是它生命中的全部。</h1></li>
                        </ul>
                    </div>

                    <div class="right">
                        <img src="../images gif/cat4.gif" alt="">
                    </div>
                </div>


                <div class="text4">
                   <div class="sticky">
                        <div class="left">
                            <img src="../Dealedimages/cat2.png" alt="">
                        </div>
                        <div class="right">
                            <ul>
                                <li><h1>但是。。。</h1></li>
                                <li><h1>不是每一个小天使都能如此幸运。。。</h1></li>
                            </ul>

                        </div>
                   </div> 
                </div>
                
                 <div class="text5">
                    <div class="sticky">
                        <div class="left">
                            <ul>
                                <li><h2>据不完全统计</h2></li>
                                <li><h2>在我国，每年约有760万只流浪动物被送往动物收容所</h2></li>
                                <li><h2>但是只有2%~3%的猫和15%~20%的狗狗能找到它们的主人</h2></li>
                                <li><h2>每年约有270万只流浪动物因为各种原因无法生存</h2></li>
                            </ul>
                        </div>

                        <div class="right">
                            <ul>
                                <li style="display: none;"><img src="../images/aid station grey.jpg" alt=""></li>
                                <li style="display: none;"><img src="../images/aid station3.jpg" alt=""></li>
                                <li style="display: none;"><img src="../images/aid station5.jpg" alt=""></li>
                                <li style="display: none;"><img src="../images/aid station4.jpg" alt=""></li>
                            </ul>
                        </div>
                    </div>
                </div>
                
                <div class="text6">
                    <div class="sticky">
                        <div class="left">
                            <video style="width:40vw;" muted autoplay loop>
                                <source src="http://photo.karrysmile.top/injuredpet.mp4" type="video/mp4">
                            </video>
                        </div>
                        <div class="right">
                            <ul style="overflow:-moz-hidden-unscrollable;">
                                <li>
                                    <h1>平等在人类社会被倡导了几千年</h1>
                                    <h1>动物生灵不应该被区别对待</h1>
                                    <h1>四处游荡的它们被驱逐殴打已经是常态</h1>
                                    <h1>为了觅食 在陌生的车水马龙中穿行</h1>
                                </li>
                                <li>
                                    <h1>面对所谓的“人类朋友”</h1>
                                    <h1>它们更多是恐惧不安</h1>
                                    <h1>即使是被送到收容所的动物</h1>
                                    <h1>也因为各种限制得不到好的照顾</h1>
                                </li>
                                <li>
                                    <h1>疫情以来 对野生动物的抵触更为明显</h1>
                                    <h1>甚至出现大批集中杀戮流浪动物的情况</h1>
                                    <h1>但谁都心知肚明 错的并不是它们</h1>
                                </li>
                                <li>
                                    <h1>不得否认的是 存在一些流浪动物</h1>
                                    <h1>恢复野性 对路人造成伤害</h1>
                                    <h1>也因此出现了很多大量捕杀流浪动物的情况</h1>
                                    <h1>但这并不是正常的人和动物的和谐关系</h1>
                                    <h1>我们也期待着<span style="font-size: 3rem; color: aqua;">改变</span></h1> 
                                </li>
                            </ul>
                        </div>
                        <div class="after" style="display: none;">
                            <ul>
                                <li><h1>如何改变？</h1></li>
                                <li><h1>解铃还需系铃人</h1></li>
                            </ul> 
                        </div>
                    </div>
                </div>

 
                <div class="text7">
                    <div class="sticky">
 
                        <video src="http://photo.karrysmile.top/Less.mp4" muted autoplay loop></video>
                        <div class="rex">
                            <div class="center">
                                <ul>
                                    <li>
                                        <h1>现实表明 流浪动物主要来源于主人的遗弃 <br>
                                        有的在被遗弃前若未进行绝育 就会无限制的大量繁殖</h1>
                                    </li>
                                    <li>
                                        <h1>对此 我们提倡<br>
                                            “不爱 也请别伤害”，友好的对待街边的流浪动物 <br>
                                            抱着负责任的态度领养小动物，不随便遗弃</h1>
                                    </li>
                                    <li>
                                        <h1>若是没有充足的精力 请及时对小动物绝育 防止泛滥<br>
                                            积极产于流浪动物救助活动 尽己所能 <br>
                                            理性救助 不随便轻易喂食 不轻易移动受伤动物</h1>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div> 

                <div class="introduce" >
                    <div class="First">
                        <span class="circle1" id="circle"></span>
                            <span class="circle2" id="circle"></span>
                            <img id="gif" src="../images gif/cat2.gif" alt="">
                            <span class="circle3" id="circle">
                                <img src="../images/dog_footprint.png" alt="">
                                <img src="../images/dog_footprint.png" alt="">
                                <img src="../images/dog_footprint.png" alt="">
                                <img src="../images/dog_footprint.png" alt="">
                            </span>
                               <h1 class="text">欢迎来到华农宠物收容所</h1>
                                
                            <span class="circle4" id="circle">
                                <img src="../images/cat_footprint.png" alt="">
                                <img src="../images/cat_footprint.png" alt="">
                                <img src="../images/cat_footprint.png" alt="">
                            </span>
                            <span class="circle5" id="circle">
                                <img src="../PetHome.ico" alt="">
                            </span>
                    </div>

                    <div class="Two">
                            <span class="circle"></span>
                            
                            <video src="http://photo.karrysmile.top/cuteCat.mp4" muted autoplay loop></video>
                            <h1>我们成立于2021年十月<br><br>
                                成立至今我们已经救助了<br><br>
                                <span style="color: red;">930</span>只宠物
                            </h1>
                            
                            <span class="circle1">
                                <img src="../PetHome.ico" alt="">
                            </span>
                    </div>
                    <div class="Three">
                        <div class="content">
                            <div class="header">
                                <ul>
                                    <li>
                                        <h1>宠物收容所——服务宗旨</h1>
                                    </li>
                                    <li>
                                        <h1>
                                            拒弃养，济遗宠，携众力，向阳行，让华农不再有流浪的宠物！
                                        </h1>
                                    </li>
                                   </ul>
                            </div>
                            <div class="middle">
                                <span class="circle">
                                    <h1>A</h1>
                                    <p>旨在提供给有领养/送养需求的爱宠人士进行联系交流</p>
                                </span>
                                <span class="circle">
                                    <h1>B</h1>
                                    <p> 募怜它帮助流浪宠物基地/小院/个人进行筹款/筹粮/救治</p>
                                </span>
                                <span class="circle">
                                    <h3>C</h3>
                                    <p>对接全国的企业，学校，医院进行合作，通过社会+企业力量解决流浪宠物的生存问题</p>
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="Four">
                        <div class="content">
                            <div class="top">
                                <h1>爱心行动——你我同行</h1>
                                <p>为流浪宠物基地和小院开展帮扶和救助工作，除了帮助流浪小院建设基地工作，同时开展小院筹粮活动，改善基地宠物的生活水平</p>
                            </div>
                            <div class="bottom">
                                <div class="card">
                                    <img src="../images/help1.jpg" alt="">
                                    <h1>救助白天鹅</h1>
                                    <div class="content-wrapper">
                                        <div class="content">
                                            <p>
                                                在去年秋季我们救助了一只受伤的白色天鹅，它被熊孩子用水枪弄伤了眼睛，伤口感染，我们花了很大的力气将它抓起来，然后再抱住它，防止乱动，以便于我们处理伤口。我们用碘伏处理好了它的伤口，避免了它的后续感染。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <img src="../images/help1.jpg" alt="">
                                    <h1>救助白天鹅</h1>
                                    <div class="content-wrapper">
                                        <div class="content">
                                            <p>
                                                在去年秋季我们救助了一只受伤的白色天鹅，它被熊孩子用水枪弄伤了眼睛，伤口感染，我们花了很大的力气将它抓起来，然后再抱住它，防止乱动，以便于我们处理伤口。我们用碘伏处理好了它的伤口，避免了它的后续感染。
                                            </p>
                                        </div>
                                    </div>
                                </div>
                                <div class="card">
                                    <img src="../images/help1.jpg" alt="">
                                    <h1>救助白天鹅</h1>
                                    <div class="content-wrapper">
                                        <div class="content">
                                            <p>
                                                在去年秋季我们救助了一只受伤的白色天鹅，它被熊孩子用水枪弄伤了眼睛，伤口感染，我们花了很大的力气将它抓起来，然后再抱住它，防止乱动，以便于我们处理伤口。我们用碘伏处理好了它的伤口，避免了它的后续感染。
                                            </p>
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                    </div>  
                    <div class="Five">
                        <div class="content-wrapper">
                            
                                <h1>我们 · 能做什么？</h1>
                                <h2>在学校开展关爱流浪宠物救助的公益活动</h2>
                                <h2>同时开展社区文明养宠的宣传工作，提高同学们的爱宠意识为目的</h2>

                               <img src="../images/gossip.png" alt="">
                               <h2 id="gossip">我们始终相信：
                                作为人类，为解决流浪动物的问题贡献出自己的一份力量，争取让每一个动物都能有一个温暖的家~</h2>
                                <div id="rec">
                                    <div class="rectangle1 rectangle">
                                        <img src="../images/aid.png" alt="">
                                        <h2>为生病的动物做</h2>
                                        <h2>紧急宠物医疗救助</h2>
                                    </div>
                                    <div class="rectangle2 rectangle">
                                        <img src="../images/aid2.png" alt="">
                                        <h2>为全国有困难的小院进行公益筹款</h2>
                                    </div>
                                    <div class="rectangle3 rectangle">
                                        <img src="../images/aid3.png" alt="">
                                        <h2>为即将断粮动物做</h2>
                                        <h2>粮食供应</h2>
                                    </div>
                                </div>                           
                        </div>
                    </div>                 
                </div>

                <div class="text8">
                    <h1>请不要吝啬<br>
                        “百分之二的爱”</h1>
                    <h1>你的一次领养，是它避免流浪的最后一道屏障！</h1>
                    <h1>“别再让我流浪"</h1>
                    <img src="../Dealedimages/cat7.png" alt="">
                </div>
            </div>
        </div>
    </div>
   

    <!-- 网页内容设计结束 -->


    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>
        
        
        
<script src="../JS/index.js"></script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 